﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:common="clr-namespace:Indigo.Quibbler.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="Indigo.Quibbler.Controls.PhotoGalleryControl"
    Height="Auto" Width="Auto" mc:Ignorable="d">
    <UserControl.Resources>
        <Style TargetType="{x:Type ListBox}">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border             
              BorderThickness="0"               
              Margin="10"
              >
                            <common:AsyncImageControl Source="{Binding ImageUrl}"
                Width="120" Height="120" 
               />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical" Background="{x:Null}"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter 
        Property="ScrollViewer.HorizontalScrollBarVisibility" 
        Value="Disabled" 
        />
            <Setter 
        Property="ScrollViewer.VerticalScrollBarVisibility"
        Value="Hidden" 
        />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <DockPanel>
                            <Button x:Name="LineLeftButton" DockPanel.Dock="Top"                           
                      Command="{x:Static ScrollBar.LineUpCommand}"      
                      CommandTarget="{Binding ElementName=scrollviewer}" Margin="10,5,10,5" Cursor="Hand" IsEnabled="{TemplateBinding ScrollViewer.CanContentScroll}" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" Width="25">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid x:Name="grid">
                                            <Image x:Name="Image" Source="../../Images/scroll_up_gallery.png" Stretch="Uniform" Height="25" Width="25"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsPressed" Value="True">
                                                <Setter TargetName="grid" Property="Effect" >
                                                    <Setter.Value>
                                                        <DropShadowEffect ShadowDepth="5"/>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>

                            <Button x:Name="LineRightButton" DockPanel.Dock="Bottom"                       
                      Command="{x:Static ScrollBar.LineDownCommand}"      
                      CommandTarget="{Binding ElementName=scrollviewer}" Margin="10,5,10,5" Cursor="Hand" IsEnabled="{TemplateBinding ScrollViewer.CanContentScroll}" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" Width="25">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid x:Name="grid">
                                            <Image x:Name="Image" Source="../../Images/scroll_down_gallery.png" Stretch="Uniform" Height="25" Width="25"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsPressed" Value="True">
                                                <Setter TargetName="grid" Property="Effect" >
                                                    <Setter.Value>
                                                        <DropShadowEffect ShadowDepth="5"/>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>

                            <ScrollViewer x:Name="scrollviewer">
                                <ItemsPresenter/>
                            </ScrollViewer>

                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ItemContainerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Border.RenderTransform>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                <Setter Property="RenderTransform" TargetName="Bd">
                                    <Setter.Value>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.15" ScaleY="1.15"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <!--<DockPanel>
       
        
    </DockPanel>-->

    <Grid x:Name="gridLayout">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Background="#FFD7DCE0" BorderThickness="0" BorderBrush="Black" Grid.Row="0" Grid.Column="1">
            <ListBox x:Name="listBox" Grid.Row="0" Grid.Column="1" Background="{x:Null}" Foreground="{x:Null}" ItemContainerStyle="{DynamicResource ItemContainerStyle}" Margin="5" BorderThickness="1" BorderBrush="Black">
                
            </ListBox>
        </Border>
        <Grid x:Name="outerGrid" Grid.Row="0" Grid.Column="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="25" />
            </Grid.ColumnDefinitions>
            <Button x:Name="prevButton" HorizontalAlignment="Left" VerticalAlignment="Center" Width="20" Cursor="Hand" Padding="1,1,5,1">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Image x:Name="Image" Source="../../Images/ScrollLeft.png" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="grid" Property="Effect" >
                                    <Setter.Value>
                                        <DropShadowEffect ShadowDepth="5"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <Grid x:Name="grid" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="10"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button x:Name="closePhoto" ToolTip="Close" Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Right" VerticalAlignment="Top" Height="25" Width="25" Click="btnPhotoClose_Click" IsHitTestVisible="True" Visibility="Collapsed">
                    <Button.Template>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="grid">
                                <Image x:Name="Image" Source="pack://application:,,/Quibbler - Universal News Reader;component/Images/btn-close.png" Stretch="Fill"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="grid" Property="RenderTransform" >
                                        <Setter.Value>
                                            <TranslateTransform Y="1.0" X="1.0"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="grid" Property="Effect" >
                                        <Setter.Value>
                                            <DropShadowEffect ShadowDepth="5"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="grid" Property="RenderTransform" >
                                        <Setter.Value>
                                            <TranslateTransform Y="1.0" X="1.0"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <TextBlock x:Name="txtHeadline" Grid.Row="0" Background="Transparent" Foreground="#FF216B96" FontSize="21.333" FontWeight="Bold" TextWrapping="Wrap" TextAlignment="Center" FontFamily="Georgia" IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="3"/>
                <Grid Grid.Row="2">
				<Grid.RowDefinitions>
				 <RowDefinition Height="*"/>
                    <RowDefinition Height="0"/>
				</Grid.RowDefinitions>
                	<common:AsyncImageControl x:Name="mainImage" d:LayoutOverrides="GridBox"/>
                	<common:ImageButton x:Name="playButton" Visibility="Collapsed" ImageSource="pack://application:,,/Quibbler - Universal News Reader;component/Images/play_button.png" HoverImageSource="pack://application:,,/Quibbler - Universal News Reader;component//Images/play_button.png" Background="Transparent" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0" Height="80" Width="80" />
                </Grid>
				 
                <TextBlock x:Name="txtSubHeadline" Grid.Row="3" Background="Transparent" Foreground="Black" FontSize="16" TextWrapping="Wrap" TextAlignment="Justify" FontFamily="Georgia" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.ColumnSpan="3"/>
            </Grid>
            <Button x:Name="nextButton" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Width="20" Cursor="Hand" Padding="5,1,1,1">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Image x:Name="Image" Source="../../Images/ScrollRight.png" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="grid" Property="Effect" >
                                    <Setter.Value>
                                        <DropShadowEffect ShadowDepth="5"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
    </Grid>


</UserControl>
